import { defineStore } from 'pinia'
import gsap from 'gsap'
import type { TitleType } from '@/components/StepTip.vue'

export const useAppStore = defineStore('app', {
  state: () => ({
    globalTip: null as TitleType,
    prevEndTip: null as TitleType,
    layoutTip: '',
    
  }),
  getters: {
    isShowGlobalTip: state => !!state.globalTip,
  },
  actions: {
    setLayoutTip(content: string) {
      this.layoutTip = content
    },
    hideGlobalTip() {
      this.globalTip = null
      this.prevEndTip = null
    },
    setGlobalTip(titleType: TitleType, endType?: TitleType) {
      this.globalTip = titleType

      if (endType) {
        this.prevEndTip = endType
        setTimeout(() => {
          /* ... */
          gsap.timeline()
            .fromTo('#prevEndTip',
              { scale: 0.2, opacity: 0, y: -140 },
              {
                scale: 1,
                opacity: 1,
                duration: 1,
                ease: 'elastic.out(1,0.8)',
                y: -140,
              },
            )
            .to('#prevEndTip',
              {
                delay: 1,
                y: 1000,
              },
            )
            .fromTo('#globalTip',
              { scale: 0.2, opacity: 0, y: -400 },
              {
                scale: 1,
                opacity: 1,
                duration: 0.8,
                y: -140,
                ease: 'elastic.out(1,0.8)',
                onComplete: () => {
                  setTimeout(this.hideGlobalTip, 1000)
                },
              })
        }, 500)
      }
      else {
        setTimeout(() => {
          /* ... */
          gsap.fromTo('#globalTip',
            { scale: 0.2, opacity: 0, y: -140 },
            {
              scale: 1,
              opacity: 1,
              duration: 1,
              y: -140,
              ease: 'elastic.out(1,0.8)',
              onComplete: () => {
                setTimeout(this.hideGlobalTip, 1000)
              },
            })
        }, 500)
      }
    },
  },
})
